<template>
  <view class="field-explain">
    <text class="cuIcon-questionfill" :style="[{color:color}]" v-if="text" @click="changeExplainTip"></text>
    <view class="tip-content" v-if="text&&showExplainTip">
      <view class="shadow" @click="changeExplainTip">
      </view>
      <view class="text" @click.stop="">
        {{text}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      color: {
        type: String
      },
      text: {
        type: String
      },
    },
    data() {
      return {
        showExplainTip: false
      }
    },
    methods: {
      changeExplainTip() {
        this.showExplainTip = !this.showExplainTip
      }
    },
  }
</script>

<style scoped lang="scss">
  .field-explain {
    font-size: 3rem;
    line-height: 6rem;
    width: 6rem;
    text-align: left;
    position: relative;
    display: inline-block;
    color: #000;

    .tip-content {
      position: absolute;
      right: 0;
      bottom: -9rem;
      width: 40rem;
      font-size: 2rem;
      line-height: 2.4rem;
      padding: 2rem;
      border-radius: 1rem;
      z-index: 2;
      background-color: $retail-color-primary-light;
      color: #000;

      &:before {
        content: '';
        position: absolute;
        right: 2rem;
        top: -2rem;
        width: 0;
        height: 0;
        border: 1rem solid transparent;
        border-bottom-color: $retail-color-primary-light;
      }

      .text {
        display: inline-block;
        z-index: 2;
        text-align: left;
        white-space: pre-line;

      }

      .shadow {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 1;
      }
    }

  }
</style>
